<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>ad</title>
        <link rel="stylesheet" type="text/css" href=".。/css/api.css" />
        <style type="text/css">
            html,
            body {
                height: 100%;
                background-color: #fff;
                overflow: hidden;
                margin: 0;
            }
            h1 {
              text-align: left;
              position: relative;
              top: 40px;
              left: 20px;
              color: #6AB494;
              font-size: 22px;

            }
            .center-horizontal {
              height: 90%;
              position: relative;
              top: 40px;
              left: 20px;
            }
            .login_pic {
                position: relative;
                top: 20px;
                width: 100px;
                margin: 0 auto;
            }

            .login_pic img {
                width: 100px;
            }

          .loginIn {
            position: relative;
            margin-top: 30px;
            width: 90%;
            height: 30px;
            background-color: #fff;
            font-size: 14px;
            color: #000;
            border: none;
            border-bottom: 1px solid #D7E2EA;

          }
          input:focus{
              outline:none;

              border-bottom: 3px solid #D7E2EA;
          }
          #button {
            position: relative;

            width: 90%;
            height: 40px;
            text-align: center;
            background-color: #6AB494;
            font-size: 16px;
            top: 30px;
            padding-top: 15px;
            border-radius: 5px;
            color: #fff;
          }
          .right, .left{
            font-size: 14px;
            color: #6AB494;}
          .left {
              float: left;
              margin-top: 40px;
              /*margin-left: 5px;*/
          }
          .right{
            float: right;
            margin-top: 40px;
            margin-right: 35px;
          }
          .footer {
            height: 10%;
            position: absolute;
            bottom: 10px;
            width: 100%;
            font-size: 14px;
            text-align: center;
          }

        </style>
    </head>

    <body scrolling="no">
          <h1>教职工绩效考核管理系统</h1>
          <section class="content center-horizontal">
            <span>
              <input  class="loginIn" type="text" id="username" placeholder="用户名/手机号/邮箱"/>

            </span>
            <span>
              <input class="loginIn" id="password" placeholder="密码"/>

            </span>

            <div id="button" class="shadow button" onclick="openMain();">
              登录
            </div>

            <div class="left" onclick="openNewFrame();">
              忘记密码？
            </div>
            <div class="right">
              新用户注册
            </div>
            <div class="footer">
              登陆即代表阅读并同意服务条款
            </div>
          </section>

    </body>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript">
        apiready = function() {


        };
        function openMain() {
          api.openWin({
              name: 'index',
              url: '../index.html',
              pageParam: {
                  name: 'test'
              }
          });
        }
          function openNewFrame(){
            api.openFrame({
                name: 'findPassward',
                url: './findPassward.html',
                rect: {
                    x: 0,
                    y: api.winWidth,
                    w: api.frameWith,
                    h: api.frameHeight
                },
                pageParam: {
                    name: 'test'
                },
                bounces: true,
                bgColor: 'rgba(255,255,255,0)',
                vScrollBarEnabled: true,
                hScrollBarEnabled: true
            });


          }

    </script>
